<template>
 <view class="">
 	<van-search
 	 v-model="searchOption.name"
 	  shape="round"
 	  background="#4fc08d"
 	  placeholder="请输入医院名称"
	  @search="onSearch"
 	/>
	<view  class="item" v-for="item in hospitalList" :key="item.id" @click="goDept(item.id)">
		 <view class="avatar">
		 	<image
			class="img"
			mode="scaleToFill"
		 	  src="https://nwzimg.wezhan.cn/contents/sitefiles2022/10113300/images/3148097.jpg"
		 	/>
		 </view>
		 <view class="info">
		 	<view class="name van-ellipsis" >
		 		{{item.name}}
		 	</view>
			<view class="addr van-ellipsis--l2">
				<van-tag type="primary">地址</van-tag>{{item.address}}
			</view>
			<view class="desc van-multi-ellipsis--l2">
				<van-tag >描述</van-tag>{{item.description}}
			</view>
			
		 </view>
	</view>
	
 </view>
</template>

<script setup lang="ts">	
import {  ref, unref } from 'vue'
import { onLoad } from "@dcloudio/uni-app";
import {listHospital } from '@/api/hospital'
const searchOption = ref({
	name:'',
	pageNumber:1,
	pageSize:100
})
const hospitalList = ref({})
const onSearch = async ()=>{
	console.log(unref(searchOption));
	hospitalList.value = await listHospital(unref(searchOption))
	console.log(unref(hospitalList));
}

const handleList = async ()=>{
	hospitalList.value =  await listHospital(unref(searchOption))
	console.log('value',unref(hospitalList));
}
const goDept = (id:string)=>{
	uni.navigateTo({
		url:`/pages/department/department?id=${id}`
	})
}
onLoad(()=>{
	  handleList()
})
</script>

<style scoped>
.item{
	display: flex;
	height: 80px;
	margin:10px 0;
}
.avatar{
	width: 30%;
	height: 80px;
}
.avatar .img{
	height: 80px;
	width: 100%;
}
.info{
	/* background-color: blue; */
	width: 100%;
}
.name{
	font-size: 17px;
}
.addr{
	font-size: 13px;
}
.desc{
	font-size: 12px;
}
</style>
